<template>
	<view class="main-content">
		<view class="table-content">
			<view class="list-item-wrapper" v-bind:id="index" v-for="(item,index) in records" :key="index">
				<view class="list-item">
					<view>工段编号</view>
					<view>{{item.sectionNo}}</view>	
				</view>
				<view class="list-item">
					<view>工段地址</view>
					<view>{{item.address}}</view>
				</view>
				<view class="list-item">
					<view>工作中心</view>
					<view>{{item.workCenter}}</view>
				</view>
				<view class="list-item">
					<view class="u-flex u-col-center">当前提示</view>
					<view class="reminderContent u-flex-nowrap">{{item.content}}</view>
				</view>
				<view class="u-flex u-row-center">
					<u-button size="medium" type="warning" @click="modify(item.content,item.sectionNo)">修改提示</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getPromptInfo } from '../../../utils/index.js'
	export default {
		data() {
			return {
				records: ''								//后台返回的数据,数组内含对象
			}
		},
		methods: {
			// 获取所管理工段的信息
			async getContent() {
				const { data } = await getPromptInfo()
				this.records = data.data
			},
			// 将参数传递到modify.vue页面
			// content的内容显示input框内，sectionNo信息为后台需要，不做显示
			modify(content, sectionNo) {
				uni.navigateTo({
					url:"./modify?content=" + content + '&sectionNo=' + sectionNo 
				})
			}
		},
		// 不使用onLoad是因为从修改页面返回该页面后不能刷新content的内容
		onShow() {
			this.getContent()
		}
	}
</script>

<style lang="scss" scoped>
.main-content {
	width: 100%;
}
.main-content ::v-deep .u-form {
	margin: 0rpx 10rpx;
	padding: 0rpx 10rpx;
}
// 排产返回的列表信息块外层包裹器
.list-item-wrapper {
	margin: 30rpx;
	background-color: #FFEFD5;
}
// 排产返回的列表信息块的样式
.list-item {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	margin: 10rpx 10rpx;
}
// 上线下线按钮样式
.operateBtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}
.hintInfo {
	display: flex;
	justify-content: center;
	color: #E0E0E0;
}
.reminderContent {
	text-overflow : ellipsis;
	width: 200rpx;
}
</style>
